<template>
  <div class="flex justify-center">
    <div class="width-main">
      <!-- comment -->
      <div>
        <!-- detail -->
        <section class="margin flex justify-center align-center" id="comment">
          <div class="padding"></div>
        </section>
        <!-- comment or reply -->
        <div class="margin-bottom">
          <span class="title-button"
            >评论<span
              class="text-pointer text-red"
              v-if="forms.cid"
              @click="handleCancelReply"
            >
              / 取消回复</span
            ></span
          >
        </div>
        <div class="comment-form">
          <div class="input-control">
            <input
              type="text"
              @blur="handleQQInfo"
              placeholder="呢称或QQ号"
              v-model="forms.nickname"
            />
            <input
              type="text"
              placeholder="邮箱(必须*)"
              v-model="forms.email"
            />
            <input type="text" placeholder="网站" v-model="forms.url" />
          </div>
          <textarea
            ref="contentArea"
            :placeholder="
              placeholderText === ''
                ? '欢迎您的吐槽和指正O(∩_∩)O'
                : placeholderText
            "
            class="textarea-control"
            v-model="forms.content"
          ></textarea>
          <div class="show-control flex-reverse align-center">
            <span @click="handlePreView">预览</span>|<span
              @click="handleEmojiShow"
              >表情</span
            >
          </div>
          <!-- Emoji组件 -->
          <Emoji v-show="is_emoji" @emojiClick="handleEmoji"></Emoji>
          <div
            class="preview"
            v-show="is_preview"
            v-html="$options.filters.emojiFilter(forms.content)"
          ></div>
          <div class="button-control">
            <a href="https://segmentfault.com/markdown" target="_blank"
              ><svg
                class="markdown"
                viewBox="0 0 16 16"
                version="1.1"
                width="16"
                height="16"
                aria-hidden="true"
              >
                <path
                  fill-rule="evenodd"
                  d="M14.85 3H1.15C.52 3 0 3.52 0 4.15v7.69C0 12.48.52 13 1.15 13h13.69c.64 0 1.15-.52 1.15-1.15v-7.7C16 3.52 15.48 3 14.85 3zM9 11H7V8L5.5 9.92 4 8v3H2V5h2l1.5 2L7 5h2v6zm2.99.5L9.5 8H11V5h2v3h1.5l-2.51 3.5z"
                ></path></svg
            ></a>
            <div class="submit" @click="handleComment">留言</div>
          </div>
        </div>
      </div>
      <!-- comments -->
      <div class="comment-list">
        <h4 class="text-shadow text-bold">
          <span class="title-button">留言 ({{ count }})</span>
        </h4>
        <div v-if="!count">
          <div class="empty flex justify-center margin-tb">
            <img
              src="https://gitee.com/lovestarboy/figurebed/raw/master/typora/empty.png"
              alt=""
            />
          </div>
        </div>
        <div v-for="(item, index) in comments" :key="index">
          <div class="comment-item comment-border padding-sm margin-top-sm">
            <span class="comment-reply text-red" @click="handleReply(item)"
              >回复</span
            >
            <div class="comment-header">
              <img class="avatar" :src="item.avatar" /><span
                class="text-bold text-df"
                ><a :href="item.website" target="_blank">{{
                  item.nickname
                }}</a></span
              >
              <span class="text-xs">{{
                item.add_time | commentDateFilter
              }}</span>
            </div>
            <div class="comment-content">
              <div class="margin-tb-sm">
                <span
                  class="text-height"
                  v-html="$options.filters.emojiFilter(item.comment)"
                ></span>
              </div>
            </div>
          </div>
          <div
            class="comment-item comment-reply-border padding-sm"
            v-for="(item1, index1) in item.children"
            :key="index1"
          >
            <span class="comment-reply text-red" @click="handleReply(item1)"
              >回复</span
            >
            <div class="comment-header">
              <img class="avatar" :src="item1.avatar" /><span
                class="text-bold text-df"
                ><a :href="item1.website" target="_blank">{{
                  item1.nickname
                }}</a></span
              >
              <span class="text-xs">{{
                item1.add_time | commentDateFilter
              }}</span>
            </div>
            <div class="comment-content">
              <div class="margin-tb-sm">
                <span class="reply-comment">@{{ item1.replyname }}</span
                ><span
                  class="text-height"
                  v-html="$options.filters.emojiFilter(item1.comment)"
                ></span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Emoji from "@/view/Emoji.vue";
import { vaildEmail, vaildWebsite } from "@/utils/validate";
import { recursive } from "@/libs/itools";
import { getQQInfo, addComment, commentsList } from "@/apiv/comment";
export default {
  props: {
    aid: {
      type: Number,
      default: 0,
    },
  },
  components: {
    Emoji,
  },
  data() {
    return {
      is_preview: false,
      is_emoji: false,
      count: 0,
      comments: [],
      placeholderText: "",
      forms: {
        cid: 0,
        qq: "",
        email: "",
        url: "",
        content: "",
        avatar: "",
        nickname: "",
      },
    };
  },
  mounted() {
    this.handleCommentsList();
  },
  methods: {
    handleReply(item) {
      document.querySelector("#comment").scrollIntoView({ behavior: "smooth" });
      this.forms.cid = item.id;
      this.placeholderText = `@${item.nickname}`;
    },
    // get comment list
    handleCommentsList() {
      let aid = this.aid;
      commentsList({ aid }).then((res) => {
        // console.log(res);
        this.comments = recursive(res.data.comments);
        this.count = res.data.count;
        // console.log(this.comments);
      });
    },
    // handle qq get qq ---> nickname
    handleQQInfo() {
      let qq = this.forms.nickname.trim();
      this.forms.qq = qq;
      if (qq === "") return;
      getQQInfo(qq)
        .then((res) => {
          this.forms.nickname = res.data.nickname;
          this.forms.avatar = res.data.avatar;
        })
        .catch((err) => {
          console.warn("warning");
        });
    },
    // cancel reply
    handleCancelReply() {
      this.forms.cid = 0;
      this.placeholderText = "";
    },
    // reply
    handleComment() {
      // no article id
      if (!this.aid) return;
      if (!vaildEmail(this.forms.email))
        return this.$message.warning("请填写正确的邮箱");

      if (!vaildWebsite(this.forms.url))
        return this.$message.warning("请填写正确的网址");

      if (this.forms.content.trim() === "")
        return this.$message.warning("请填写您的吐槽哦");

      let data = Object.assign({ aid: this.aid }, this.forms);
      addComment(data)
        .then((res) => {
          this.$message.success(res.msg);
          this.forms = {
            cid: 0,
            qq: "",
            email: "",
            url: "",
            content: "",
            avatar: "",
            nickname: "",
          };
        })
        .catch((err) => {
          this.$message.warning(err.msg);
        });
    },
    //preview show
    handlePreView() {
      this.is_emoji = false;
      this.is_preview = !this.is_preview;
    },
    //emoji show
    handleEmojiShow() {
      this.is_preview = false;
      this.is_emoji = !this.is_emoji;
    },
    handleEmoji(msg) {
      let emoji = `@(${msg})`;
      //element input
      const myField = this.$refs.contentArea;
      if (myField.selectionStart || myField.selectionStart === 0) {
        let startPos = myField.selectionStart;
        let endPos = myField.selectionEnd;
        this.forms.content =
          myField.value.substring(0, startPos) +
          emoji +
          myField.value.substring(endPos, myField.value.length);
        this.$nextTick(() => {
          myField.focus();
          myField.setSelectionRange(
            endPos + emoji.length,
            endPos + emoji.length
          );
        });
      } else {
        this.forms.content += value;
      }
    },
  },
  filters: {},
};
</script>
<style lang='scss' scoped>
::-webkit-input-placeholder {
  color: #999;
  font-size: 14px;
  font-family: "Consolas", "Microsoft JhengHei",
    "Apple LiGothic Medium,Microsoft YaHei", "å¾®è½¯é›…é»‘", "Arial", sans-serif;
}
.empty img {
  width: 200px;
  height: 133px;
  object-fit: cover;
}
.comment-form {
  border: 1px solid rgb(243, 239, 230);
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 20px;
  color: #555;
  .input-control {
    display: flex;
    input {
      flex: 1;
      border-radius: 0;
      border: none;
      padding: 15px 10px;
      border-bottom: 1px dashed #ddd;
    }
    input:focus {
      outline: none;
      border-bottom: 1px dashed sandybrown;
    }
  }
  .textarea-control {
    width: 100%;
    min-height: 12em;
    box-sizing: border-box;
    padding: 15px 10px;
    line-height: 1.8em;
    resize: vertical;
    border: none;
  }
  .textarea-control:focus {
    outline: none;
  }
  .show-control {
    font-size: 14px;
    span {
      padding: 10px;
    }
    span:hover {
      cursor: pointer;
    }
  }
  .preview {
    font-size: 14px;
    padding: 0 10px;
  }
  .button-control {
    padding: 10px 10px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .submit {
      cursor: pointer;
      font-size: 0.9rem;
      font-weight: 700;
      color: #3c3626;
      line-height: 1;
      box-shadow: 2px 2px 2px #dcd5c3, -1px -1px 1px #ffffff;
      border-radius: 10px;
      text-align: center;
      padding: 0.6rem 2rem;
      box-sizing: border-box;
      margin: 0 0 0.4rem;
      line-height: 1.3;
      text-shadow: 2px 2px 1px #fff;
      background: #f3efe6;
    }
  }
}
.comment-list {
  padding: 20px 0;
  .comment-reply {
    position: absolute;
    bottom: 10px;
    right: 20px;
  }

  .comment-item {
    position: relative;
    border-radius: 3px;
    cursor: pointer;

    .comment-header {
      height: 40px;
      .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1px solid #eee;
        vertical-align: middle;
      }
      span {
        margin-left: 10px;
        color: #555;
      }
    }
    .comment-content {
      margin: 10px 0;
      .reply-comment {
        font-size: 14px;
        color: #eb5055;
        margin-right: 10px;
      }
    }
  }
}

.comment-border {
  border: 1px solid rgba(184, 197, 214, 0.2);
  border-radius: 3px;
}

.comment-reply-border {
  // border-top: 1px solid rgba(184, 197, 214, 0.2);
  border-bottom: 1px solid rgba(184, 197, 214, 0.2);
  border-left: 1px solid rgba(184, 197, 214, 0.2);
  border-right: 1px solid rgba(184, 197, 214, 0.2);
}
</style>